<template>
  <view class="cu-list grid no-border" :class="['col-'+col]" :style="[{background: bgColor}]">
    <block v-for="(item,index) in dataVal" :key="index">
      <view class="cu-item flex align-center justify-center">
        <image class="block-48" :src="item.thumb" mode="aspectFit" lazy-load></image>
        <text>{{item.name}}</text>
      </view>
    </block>
  </view>
</template>

<script>
export default {
  name: 'fu-grid',
  props: {
    col: {
      type: [String,Number],
      default: 5,
    },
    bgColor: {
      type: String,
      default: '#FFFFFF'
    },
    dataVal: {
      type: Array,
      default(){
        return []
      }
    }
  },
  data() {
    return {
      current: 0
    };
  },
  methods: {
    navTo(path, auth) {
      if (auth) {
        this.$util.actionAuth(() => {
          uni.navigateTo({
            url: path
          });
        });
      } else {
        uni.navigateTo({
          url: path
        });
      }
    },
    swiperChange(e) {
      this.current = e.detail.current;
    }
  },
};
</script>

<style lang="scss" scoped>
.swiper {
  height: 160rpx;
}
.block-48 {
  width: 90rpx;
  min-width: 90rpx;
  height: 90rpx;
  min-height: 90rpx;
  image {
    width: 100%;
    height: 100%;
  }
}

.sub-item {
  position: relative;
  .jiaobiao {
    position: absolute;
    top: 10rpx;
    right: 20rpx;
    width: 35rpx;
    height: 35rpx;
    color: #fff;
    background: $fu-main-color;
    border-radius: 50% 50% 0 50%;
    font-size: 20rpx;
    text-align: center;
    line-height: 35rpx;
    z-index: 999;
  }
  .scale-up {
    width: 54rpx;
    height: 30rpx;
    line-height: 30rpx;
    right: 0;
    border-radius: 15rpx 15rpx 15rpx 0;
  }
}

.bar {
  .bar_item {
    width: 30rpx;
    height: 6rpx;
    background: #f2f3f5;
    border-radius: 6rpx;
  }
  .bar_item + .bar_item {
    margin-left: 10rpx;
  }
  .bar_item.active {
    background: #f02325;
  }
}
.text-333 {
  color: #333333;
}

.fade {
  animation: fade 1.5s infinite;
}
@keyframes fade {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.scale-up {
  animation: scale-up 1.5s infinite;
}
@keyframes scale-up {
  0% {
    transform: scale(0.2);
  }

  100% {
    transform: scale(1);
  }
}
</style>
